<template>
  <div>
    <div>
      <div class="top">
        <van-icon @click="goback" class="zuo" name="arrow-left" />
        购物车
        <van-icon name="delete-o" class="you" sizi="16px" @click="over"
          >清空购物车</van-icon
        >
      </div>
      <div ref="shopdetail">
        <div class="nothing" v-if="empty">
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="购物车为空"
          />
        </div>
        <div class="hasthing" v-else>
          <van-swipe-cell
            v-for="(item, index) in cartList"
            :key="index"
            :name="item.cartid"
            :before-close="beforeClose"
          >
            <van-checkbox
              v-model="item.flag"
              @click="selectOne(item.cartid, item.flag)"
            ></van-checkbox>
            <van-card
              :price="item.originprice"
              :title="item.proname"
              :thumb="item.img1"
            >
              <template #num>
                <van-stepper
                  v-model="item.num"
                  theme="round"
                  button-size="22"
                  disable-input
                  @change="updateNum(item.cartid, item.num)"
                />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
          <van-submit-bar
            :price="allpic"
            button-text="提交订单"
            :safe-area-inset-bottom="false"
            @submit="onSubmit"
          >
            <van-checkbox v-model="isAll">全选</van-checkbox>
          </van-submit-bar>
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <van-divider>猜你喜欢</van-divider>
      <!-- 列表 -->
      <Detaillist></Detaillist>
    </div>
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import { getCart, setNum, delone, seleone, seleall, delall,addOrder } from "@/api/cart";
import Footer from "@/components/Footer.vue";
import Detaillist from "@/components/Detail/DetailList.vue";
import { Dialog, Toast } from "vant";
export default {
  components: {
    Footer,
    Detaillist,
  },
  data() {
    return {
      empty: true,
      cartList: [],
    };
  },
  methods: {
    // 添加订单
    onSubmit(){
      // console.log(111);
      addOrder({userid:localStorage.getItem("userid")}).then((res)=>{
        console.log(res);
        localStorage.setItem("time",res.data.time)
        Toast("添加订单成功");
      })
    },
    goback() {
      this.$router.back();
    },
    updateNum(cartid, num) {
      console.log(cartid, num);
      // 调用 增加数量的接口
      setNum({ cartid, num }).then((res) => {
        console.log(res);
      });
    },
    beforeClose({ name, position, instance }) {
      console.log(name, position, instance);
      switch (position) {
        case "right":
          Dialog.confirm({
            message: "确定删除吗？",
          })
            .then(() => {
              // 点击了确定删除就在执行这里
              delone({ cartid: name }).then((res) => {
                console.log(res);
                if (res.data.code == "200") {
                  this.getCart();
                }
              });
              instance.close();
            })
            .catch(() => {
              instance.close();
            });
          break;
      }
    },
    selectOne(cartid, flag) {
      seleone({ cartid: cartid, flag: flag }).then((res) => {
        console.log(res);
      });
    },
    over() {
      Dialog.alert({
        message: "亲，确认全部删除！",
      }).then(() => {
        // on close
        delall({ userid: localStorage.getItem("userid") }).then((res) => {
            Toast("删除成功");
            window.location.reload()
        });
      });
    },
  },
  created() {
    let userid = localStorage.getItem("userid");
    getCart({ userid: userid }).then((res) => {
      console.log(res);
      if (res.data.code == "10020") {
        // 没有数据
        this.empty = true;
      } else {
        // 有数据
        this.empty = false;
        this.cartList = res.data.data;
        // console.log(this.cartList);
      }
    });
  },
  computed: {
    // 全选/全不选
    isAll: {
      set(val) {
        console.log(val);
        this.cartList.forEach((item) => (item.flag = val));
        seleall({ userid: localStorage.getItem("userid"), type: val }).then(
          (res) => {
            console.log(res);
          }
        );
      },
      get() {
        return this.cartList.every((item) => item.flag == true);
      },
    },
    // 总价
    allpic() {
      let arr = this.cartList.filter((res) => res.flag);
      console.log(arr);
      let sum = 0;
      if (arr.length) {
        for (var i = 0; i < arr.length; i++) {
          sum += arr[i].num * arr[i].originprice;
        }
        return sum * 100;
      }
      return 0;
    },
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 3.125rem;
  font-size: 1.25rem;
  text-align: center;
  line-height: 3.125rem;
  /* border-bottom: 0.0625rem solid black; */
  position: relative;
  background-color: red;
  color: white;
}
.zuo {
  position: absolute;
  left: 0.625rem;
  font-size: 1.25rem;
  top: 0.9375rem;
}
.you {
  position: absolute;
  right: 0.625rem;
  font-size: 0.875rem;
  top: 1.125rem;
}
.delete-button {
  height: 100%;
}
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: #fff;
}
::v-deep .van-checkbox {
  padding-left: 1.25rem;
  width: 1.25rem;
}
::v-deep .van-card {
  flex: 1;
  background-color: #fff;
}
.van-submit-bar {
  bottom: 2.9375rem;
  background-color: rgba(255, 255, 255, 0.841);
}
</style>